<template>
  <div class="hello">
    <div class="btn">
      
      <el-button type="primary" @click.native="onadd()">增加</el-button>
      <el-button type="primary" @click.native="onLook()">查看历史</el-button>
    </div>
    <div class="container blockDiv">
      <div v-for="(item, index) in list" :key="`item_${index}`" class="block">
        <div
          :style="{
            background: item.bg,
            borderRadius: '10px',
            position: 'relative',
            height: '100%',
          }"
        >
          <div class="star">
            <el-rate
              v-model="item.star"
              :max="item.star"
              :disabled="true"
            ></el-rate>
          </div>
          <div class="isFinsh">
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="继续操作确认吗？"
              @confirm="isFinsh(item)"
            >
              <el-button slot="reference">确认完成</el-button>
            </el-popconfirm>
            <!-- <el-popover
                placement="top"
                title="确定继续确认吗？"
                width="200"
                :ref="'popover-' + item.id"
               
                v-model="visible"
              >
	                <div style="text-align: right; margin: 0">
                      <el-button type="primary" size="mini" @click="visible=false">取消</el-button>
	                  <el-button type="primary" size="mini" @click="isFinsh(item)">确定</el-button>
                  
	            
	                </div>
	                <el-button slot="reference">确认完成</el-button>
              </el-popover> -->
            <!-- <el-button round @click.native="isFinsh(item)">确认完成</el-button> -->
          </div>
          <div class="content">
            {{ item.content }}
          </div>

          <div class="endTime">
            {{ item.endTime }}
          </div>
        </div>
      </div>
      <!-- <el-row :gutter="10" v-for="(item, index) in list" :key="`item_${index}`">
        <el-col
          ><div class="grid-content bg-purple" :style="{ background: item.bg }">
            {{ item.content }}
          </div></el-col
        >
      </el-row> -->
    </div>
    <div>
      <el-button
        type="primary"
        @click="submit()"
        style="width: 100%"
        :loading="loadingbtn"
        >加载更多</el-button
      >
    </div>
    <!-- 弹框 -->
    <dialogFrom ref="dialogFrom" :dialog="dialog" :show.sync="show">
    </dialogFrom>
    <!-- 历史表格 -->
    <dialogTaleFrom
      ref="dialogFroms"
      :dialog="dialogTable"
      :show.sync="showTables"
      :WaretableDatas="WaretableDatas"
    >
    </dialogTaleFrom>
  </div>
</template>

<script>
import { getRequest, postRequest } from "@/api/request.js";
import { worker } from "@/api/config.js";
import dialogFrom from "./from/index";
import dialogTaleFrom from "./from/table";
export default {
  name: "HelloWorld",
  components: {
    dialogFrom,
    dialogTaleFrom,
  },
  data() {
    return {
      visible: false,
      // colorssOne:["#FFEFD5","#FFEFD5","#FFEFD5"],
      // colorssTwo:["#FFDEAD","#FFDEAD","#FFDEAD"],
      // colorssThreee:["#FFC1C1","#FFC1C1","#FFC1C1"],
      // colorssFour:["#FF7F50","#FF7F50","#FF7F50"],
      // colorssFive:["#FF3030","#FF3030","#FF3030"],
      colorss: [
        ["#FFEFD5", "#FFEFD5", "#FFEFD5"],
        ["#FFDEAD", "#FFDEAD", "#FFDEAD"],
        ["rgb(248, 145, 145)", "rgb(248, 145, 145)", "rgb(248, 145, 145)"],
        ["#FF7F50", "#FF7F50", "#FF7F50"],
        ["rgb(246, 6, 6)", "rgb(246, 6, 6)", "rgb(246, 6, 6)"],
      ],
      loadingbtn: false,
      show: false,
      showTables: false,
      msg: "Welcome to Your Vue.js App",
      list: [],
      listBg: [{ bg: "#0099FF" }, { bg: "#009900" }, { bg: "#FF6600" }],
      colors: ["#FFEFD5", "#FFDEAD", "#FFC1C1", "#FF7F50", "#FF3030"],
      dialogTable: {
        title: "历史记录",
        dialogVisible: false,
        width: "60%",
        fn: this.initPage,
        shows: this.dialogTableshows,
      },
      dialog: {
        title: null,
        dialogVisible: false,
        width: "50%",
        fn: this.initPage,
        shows: this.shows,
      },
      paginations: {
        page: 0,
        pageSize: 12,
      },
      WaretableDatas: [],
    };
  },
  // created() {
  //   this.initGetData();
  // },
  mounted() {
    
    this.initGetData();
  },
  methods: {
    onLook() {
      var self = this;
      this.showTables = true;
      self.WaretableDatas = [];
      getRequest({
        // url: worker.queryContentList,
        url: "worker/queryContentList",
        data: { page: 1, pageSize: 12, type: 2 },
        successs: function (res) {
          self.WaretableDatas = res.list;
        },
      });
    },
    isFinsh(data) {
      var self = this;

      postRequest({
        url: worker.updateContent,
        data: { id: data.id },
        successs: function (res) {
          self.visible = false;
          self.$message({
            message: "成功",
            type: "success",
          });

          self.initPage();
        },
      });
    },
    dialogTableshows() {
      this.showTables = false;
    },
    shows() {
      this.show = false;
    },
    initPage() {
      this.show = false;
      this.paginations.page = 0;
      this.list = [];
      this.initGetData();
    },
    onadd() {
      this.show = true;
    },
    initGetData() {
      var self = this;
      self.paginations.page++;
      getRequest({
        url: worker.queryContentList,
        data: self.paginations,
        successs: function (res) {
          self.loadingbtn = false;
          if (res.list.length == 0) return self.$message.error("没有更多数据");
          res.list.forEach((item, index) => {
            item.endTime = item.endTime.split(" ")[0];
            if (item.star == 0) {
              item.bg = self.colors[item.star];
            } else {
              item.bg = self.colors[item.star - 1];
            }

            item.colorss = self.colorss[item.star - 1];
            // if(item.star>3){
            //       item.colorss=self.colorss.slice(item.star-3,item.star);
            // }else{
            //   item.colorss=self.colorss.slice(0,item.star);
            // }
          });
          self.list.push(...res.list);
          console.log(self.list, "self.list");
        },
      });
    },
    submit() {
      this.loadingbtn = true;
      this.initGetData();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.blockDiv {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .isFinsh {
    position: absolute;
    right: 2%;
    font-size: 16px;
    top: 2%;
    /deep/.el-button {
      padding: 7px 9px;
    }
  }
  .star {
    position: absolute;
    left: 2%;
  }
  .endTime {
    position: absolute;
    right: 1%;
    bottom: 2%;
    height: 5vh;
    line-height: 5vh;
    z-index: 1000;
    font-size: 20px;
  }
  .block {
    width: calc(calc(100% / 3) - 10px);
    margin: 5px;
    height: 25vh;
    // line-height: 20vh;
    box-sizing: border-box;
    font-size: 25px;
  }
  .content {
    width: 100%;
    height: 15vh;
    margin: 0 auto;
    position: absolute;
    top: 48%;
    transform: translateY(-56px);
    overflow: auto;
  }
  .content::-webkit-scrollbar {
    display: none;
  }
}
.hello {
  position: relative;
  overflow: hidden;
  .btn {
    position: absolute;
    right: 11%;
    top: 0%;
  }
}
.grid-content {
  height: 20vh;

  font-size: 20px;
  text-align: center;
  line-height: 20vh;
  color: white;
}
.container {
  width: 95%;
  margin: 0px auto;
  margin-top: 3%;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
